import React from 'react';
import {Link} from 'react-router-dom'
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

class Sider extends React.Component {
    rootKeys = ['/app/index', '/app/marketing', '/app/tool','/app/option','/app/example'];
    state = {
        theme: 'dark',
        current: 'index',
        openKeys:[]
    };
    componentWillMount(){
        const { location } = this.props;

        const pathSnippets = location.pathname.split('/').filter(i => i);
        const extraBreadcrumbItems = pathSnippets.map((_, index) => {
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            //url为每一小段link
            return url;
        });
        this.setState({
            current:extraBreadcrumbItems,
            openKeys:extraBreadcrumbItems
        })
    }
    changeTheme = (value) => {
        this.setState({
            theme: value ? 'dark' : 'light',
        });
    };
    handleClick = (e) => {
        //console.log('click ', e.keyPath);
        //console.log(this.state.openKeys);
        this.setState({
            current: [e.key],
        });
    };
    onOpenChange = (openKeys) => {
        console.log(openKeys)
        let latestOpenKey = openKeys[openKeys.length-1];
        if(this.rootKeys.indexOf(latestOpenKey)>=0){
            this.setState({
                openKeys:openKeys.length ? [latestOpenKey] : []
            })
        }else{
            this.setState({ openKeys });
        }
    };


    /**
     ** @vane 19/02/26
     ** mypro 菜单循环(有待优化)
     **/
    getSubMenuOrItem = item => {
        if (item.children && item.children.some(child => child.name)) {
            const childrenItems = this.getNavMenuItems(item.children);
            // 当无子菜单时就不展示菜单
            if (childrenItems && childrenItems.length > 0) {
                return (
                    <SubMenu
                        title={
                          item.icon ? (
                            <span>
                              <Icon type={item.icon} />
                              <span>{item.name}</span>
                            </span>
                          ) : (
                            item.name
                          )
                        }
                        key={item.path}
                    >
                        {childrenItems}
                    </SubMenu>
                );
            }
            return null;
        } else {
            return <Menu.Item key={item.path}><Link to={item.path}><Icon type={item.icon} />{item.name}</Link></Menu.Item>;
        }
    };
    getNavMenuItems = menusData => {
        if (!menusData) {
            return [];
        }
        return menusData
            .filter(item => item.name && !item.hideInMenu)
            .map(item => {
                // make dom
                const ItemDom = this.getSubMenuOrItem(item);
                return ItemDom;
                //return this.checkPermissionItem(item.authority, ItemDom);
            })
            .filter(item => item);
    };
    render() {
        //logo切换组件
        function LogoToggle(res){
            if(!res.collapsed){
                return <img src="http://sources.aopcdn.com/edm/images//20180629/1530258761256.png" alt=""/>
            }else{
                return '';
            }
        }
        return (
            <div className={'menu' +" " + (this.props.collapsed ? 'menu-add' : '')}>
                {
                /*<Switch
                    checked={this.state.theme === 'dark'}
                    onChange={this.changeTheme}
                    checkedChildren="Dark"
                    unCheckedChildren="Light"
                />
                 <br />
                */
                }
                <div className="menu-title">
                    <LogoToggle {...this.props} />
                </div>
                <Menu
                    theme={this.state.theme}
                    onClick={this.handleClick}
                    style={{ border:'none' }}
                    //默认展开(若需要唯一的菜单展开 注释此两项)
                    defaultOpenKeys={this.state.current}
                    defaultSelectedKeys={this.state.current}

                    //(若需要唯一的菜单展开 去掉以下三项注释)
                    //点击菜单要展开哪些菜单项
                    //openKeys={this.state.openKeys}
                    //点击菜单触发的事件
                    //onOpenChange={this.onOpenChange}
                    //当前选中
                    //selectedKeys={this.state.current}
                    mode="inline"
                    inlineCollapsed={this.props.collapsed}

                >
                    {this.getNavMenuItems(window.routeConfig[2].routes)}

                    <SubMenu key="example" title={<span><Icon type="schedule" /><span>example</span></span>}>
                        <Menu.Item key="context"><Link to={'/app/example/context'}>context</Link></Menu.Item>
                        <Menu.Item key="todo"><Link to={'/app/example/todo'}>todo</Link></Menu.Item>
                        <Menu.Item key="dispatch1"><Link to={'/app/example/dispatch1'}>dispatch1</Link></Menu.Item>
                        <Menu.Item key="dispatch2"><Link to={'/app/example/dispatch2'}>dispatch2</Link></Menu.Item>
                    </SubMenu>
                </Menu>
            </div>
        );
    }
}

export default Sider;